import { computed, ref } from 'vue';
import { visibleChartLabel } from '/@/utils/utils.ts';
// 列表字段
export const columns = [
    {
        title: '姓名',
        dataIndex: 'name',
        align: 'center',
        key: 'name',
    },
    {
        title: '单位信息',
        dataIndex: 'age',
        align: 'center',
        key: 'age',
    },
    {
        title: '联系电话',
        dataIndex: 'address',
        align: 'center',
        key: 'address',
    },
    {
        title: '联系电话',
        dataIndex: 'address1',
        align: 'center',
        key: 'address1',
    },
    {
        title: '异常事件',
        dataIndex: 'address2',
        align: 'center',
        key: 'address2',
    },
    {
        title: '异常值',
        dataIndex: 'address2',
        align: 'center',
        key: 'address2',
    },
    {
        title: '发生时间',
        dataIndex: 'address2',
        align: 'center',
        key: 'address2',
    },
    {
        title: '发生地点',
        dataIndex: 'address2',
        align: 'center',
        key: 'address2',
    },
];

//大病人数
export function useHealth() {
    const healthData = ref([
        {
            name: '高危人数',
            value: '0',
            type: '2',
            type_dictText: '恶性肿瘤',
        },
        {
            name: '中危人数',
            value: '0',
            type: '1',
            type_dictText: '其他',
        },
        {
            name: '可控人数',
            value: '0',
            type: '0',
            type_dictText: '其他',
        },
    ]);
    const getValue = computed(() => healthData.value.map((item) => item.value));
    const getName = computed(() => healthData.value.map((item) => item.name));

    function setHealth(data) {
        data?.map((item1) => {
            healthData.value.map((item2) => {
                if (item1.type == item2.type) {
                    item2.value = item1.count;
                }
            });
        });
    }

    return {
        healthData,
        getValue,
        getName,
        setHealth,
    };
}

const ringTheme = {
    dark: {
        color: ['#F58584', '#F5CC84', '#0CD9B5'],
        textStyle: {
            color: '#ffffff',
        },
        subtextStyle: {
            color: '#ffffff',
        },
        backgroundColor: 'rgba(50,50,50,0.7)',
        borderColor: '#1b7ef2',
        tooltip: {
            textStyle: {
                color: '#fff',
            },
            backgroundColor: 'rgba(50,50,50,0.7)',
            borderColor: '#1b7ef2',
        },
        legend: {
            textStyle: {
                color: '#ffffff',
            },
        },
        seriesLabel: {
            color: '#ffffff',
        },
    },
    light: {
        color: ['#F58584', '#F5CC84', '#0CD9B5'],
        textStyle: {
            color: '#5169B8',
        },
        subtextStyle: {
            color: '#607DDB',
        },
        backgroundColor: 'rgba(50,50,50,0.7)',
        tooltip: {
            textStyle: {
                color: '#768ddb',
            },
            backgroundColor: '#d5dcf8',
            borderColor: '#1b7ef2',
        },
        legend: {
            textStyle: {
                color: '#1b7ef2',
            },
        },
        seriesLabel: {
            color: '#27386e',
        },
    },
};

export function ringOption(chartData, total, theme) {
    const { textStyle, subtextStyle, tooltip, legend, seriesLabel, color } = ringTheme[theme] || ringTheme.dark;
    const data = visibleChartLabel(chartData);
    return {
        title: {
            text: '总人数',
            subtext: total + '',
            x: 'center',
            y: '35%',
            textStyle: {
                fontSize: 14,
                color: '#ffffff',
                fontWeight: 'normal',
                ...textStyle,
            },
            subtextStyle: {
                color: '#ffffff',
                fontSize: 24,
                fontWeight: 'bold',
                ...subtextStyle,
            },
        },
        color: color || ['#0098FA', '#0CD9B5', '#F5CC84'],
        tooltip: {
            trigger: 'item',
            show: true,
            textStyle: {
                color: '#fff',
            },
            backgroundColor: 'rgba(50,50,50,0.7)',
            borderColor: '#1b7ef2',
            ...tooltip,
        },
        legend: {
            bottom: '0',
            left: 'center',
            icon: 'circle',
            textStyle: {
                color: '#ffffff',
                fontSize: 16,
            },
            selectedMode: false,
            ...legend,
        },
        series: [
            {
                type: 'pie',
                radius: ['50%', '72%'],
                center: ['50%', '47%'],
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    position: 'outside',
                    formatter: '{d}%',
                    color: '#27386e',
                    fontSize: 14,
                    // ...seriesLabel,
                },
                labelLine: {
                    show: true,
                    smooth: true,
                    length: 12,
                    length2: 5,
                },
                data: data,
            },
        ],
    };
}
